<template>
    <div class="AsideMenu bg-navy"
         :class="asideMenuClass"
    >
        <el-menu
                mode="vertical"
                :unique-opened="true"
                class="w100p trans"
                :background-color="$_colors.navy"
                :text-color="$_colors.silver"
                :active-text-color="$_colors.aqua"
                :collapse="!$store.state.asideIsExpend"
        >
            <template v-for="( item) in menu">
                <el-submenu :index="item.path" v-if="hasChild(item) && needShow(item)"
                    :key="item.path"
                >
                    <template slot="title">
                        <i :class="item.meta.icon"></i>
                        <span slot="title">{{item.meta.title}}</span>
                    </template>
                    <el-menu-item
                            v-for="(child,i) in item.children"
                            :key="i"
                            :index="child.path"
                            @click.native="clickLink(child)"
                    >
                        <i class="iconfont" :class="child.meta.icon"></i>
                        <span slot="title">{{ child.meta.title }}</span>
                    </el-menu-item>
                </el-submenu>
                <el-menu-item :index="item.path" v-if="!hasChild(item) && needShow(item)"
                              :key="item.path"
                              @click.native="clickLink(item)"
                >
                    <i :class="item.meta.icon"></i>
                    <span slot="title">{{ item.meta.title}}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
import aside_menu from "@/router/aside_menu"
import Windows from "@/project/var/Windows"

@Component({
  components: {}
})
export default class AsideMenu extends Vue {
  menu: any = aside_menu

  mounted() {
    this.reload()
  }

  activated() {}

  reload() {}

  hasChild(route) {
    return route.children && route.children.length > 0
  }

  needShow(route) {
    return !route.meta.hidden
  }

  clickLink(router) {
    Windows.set(router)
  }

  get asideMenuClass() {
    return {
      'open': this.$store.state.asideIsExpend
    }
  }

}
</script>

<style lang="less" scoped>
    @import (reference) "~@/style/all.less";

    .AsideMenu {

        .iconfont {
            padding-right: 8px;
        }
    }
</style>